<template>
	<div class="pagination">

		<button :disabled="pageNo == 1" @click="$emit('getPageNo',pageNo-1)">上一页</button>

		<button v-show="startNumAndEndNum.start>1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
		<button v-show="startNumAndEndNum.start>2">...</button>

		<button @click="$emit('getPageNo',page)" :class="{active:pageNo==page}" v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page>=startNumAndEndNum.start">{{page}}</button>


		<button v-show="startNumAndEndNum.end<totalPage-1">···</button>
		<button @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalPage}" v-show="startNumAndEndNum.end<totalPage">{{totalPage}}</button>
		<button :disabled="pageNo == totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>

		<button style="margin-left: 30px">共{{total}} 条</button>
		<!-- <p>{{startNumAndEndNum}}---当前页码{{pageNo}}</p> -->
	</div>
</template>

<script>
	export default {
		name: "Pagination",
		props: ["pageNo", "pageSize", "total", "continues"],
		// 1、需要知道当前是第几页：pageNo字段代表当前页数
		// 2、需要知道每页展示多少数据：pageSize字段代表
		// 3、需要知道整个分页器一共有多少数据：total字段代表
		// 4、需要知道分页器连续页面个数：5|7（对称）continues字段代表
		computed: {
			//一共有多少页
			totalPage() {
				return Math.ceil(this.total / this.pageSize)
			},
			startNumAndEndNum() {
				let start = 0,
					end = 0
				//如果分页的连续页面数大于总页数，那么起始值只能是1，终止值只能是最大页数
				if (this.continues > this.totalPage) {
					start = 1
					end = this.totalPage
				} else {
					start = this.pageNo - Math.floor(this.continues / 2)
					end = this.pageNo + Math.floor(this.continues / 2)
					//这里用两个极限值
					//起始值必须大于1
					//终点值不能大于最大实际页数totalPage
					if (start < 1) {
						start = 1
						end = this.continues
					}
					if (end > this.totalPage) {
						//这里加一是start的位置
						start = this.totalPage - this.continues + 1
						end = this.totalPage
					}
				}
				return {
					start,
					end
				}
			}

		}
	};
</script>

<style lang="less" scoped>
	.pagination {
		text-align: center;

		button {
			margin: 0 5px;
			background-color: #f4f4f5;
			color: #606266;
			outline: none;
			border-radius: 2px;
			padding: 0 4px;
			vertical-align: top;
			display: inline-block;
			font-size: 13px;
			min-width: 35.5px;
			height: 28px;
			line-height: 28px;
			cursor: pointer;
			box-sizing: border-box;
			text-align: center;
			border: 0;

			&[disabled] {
				color: #c0c4cc;
				cursor: not-allowed;
			}

			&.active {
				cursor: not-allowed;
				background-color: #409eff;
				color: #fff;
			}
		}
	}

	.active {
		background: skyblue;
	}
</style>
